/**
 * src/pages/guest/orders/index.tsx
 * ------------------------------------
 * 客人订单页面
 * 1. 展示用户的所有订单历史，按时间倒序排列
 * 2. 显示订单状态、菜品详情、价格、下单时间等
 * 3. 支持查看订单详情与订单状态跟踪
 * 4. 底部导航切换至菜单/购物车/个人中心
 * 仅客人角色可访问，依赖全局状态获取用户订单数据
 * 创建日期：2025-08-06
 */
import { View, Text } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useAppContext } from '../../../store'
import { formatPrice, getOrderStatusText, getOrderStatusColor, formatDateTime } from '../../../utils'
import './index.scss'

export default function GuestOrders() {
  const { state } = useAppContext()
  const { orders, currentUser } = state

  const userOrders = orders.filter(order => order.userId === currentUser?.id)

  // 获取订单ID的短格式（微信小程序兼容）
  const getShortOrderId = (orderId: string) => {
    if (orderId.length <= 6) return orderId
    return orderId.substring(orderId.length - 6)
  }

  const handleViewMenu = () => {
    Taro.navigateTo({ url: '/pages/guest/menu/index' })
  }

  const handleViewCart = () => {
    Taro.navigateTo({ url: '/pages/guest/cart/index' })
  }

  const handleViewProfile = () => {
    Taro.navigateTo({ url: '/pages/guest/profile/index' })
  }

  return (
    <View className='guest-orders'>
      <View className='header'>
        <Text className='title'>我的订单</Text>
      </View>

      <View className='orders-list'>
        {userOrders.map(order => (
          <View key={order.id} className='order-item'>
            <View className='order-header'>
              <Text className='order-id'>订单 #{getShortOrderId(order.id)}</Text>
              <Text className='order-time'>{formatDateTime(order.createdAt)}</Text>
            </View>
            
            <View className='order-items'>
              {order.items.map(item => (
                <View key={item.dishId} className='order-item-detail'>
                  <Text className='item-name'>{item.dishName}</Text>
                  <Text className='item-quantity'>x{item.quantity}</Text>
                  <Text className='item-price'>{formatPrice(item.totalPrice)}</Text>
                </View>
              ))}
            </View>
            
            <View className='order-footer'>
              <View className='order-total'>
                <Text className='total-label'>总计:</Text>
                <Text className='total-amount'>{formatPrice(order.finalAmount)}</Text>
              </View>
              
              <View className='order-status'>
                <Text 
                  className='status-badge'
                  style={{ backgroundColor: getOrderStatusColor(order.status) }}
                >
                  {getOrderStatusText(order.status)}
                </Text>
              </View>
            </View>
            
            {order.pointsUsed > 0 && (
              <View className='points-used'>
                <Text className='points-label'>积分抵扣: {order.pointsUsed}</Text>
              </View>
            )}
          </View>
        ))}
        {userOrders.length === 0 && (
          <View className='empty-state'>
            <Text className='empty-icon'>📋</Text>
            <Text className='empty-text'>暂无订单</Text>
            <Text className='empty-desc'>快去点餐吧！</Text>
          </View>
        )}
      </View>

      {/* 底部导航栏 */}
      <View className='bottom-nav'>
        <View className='nav-item' onClick={handleViewMenu}>
          <Text className='nav-icon'>🍽️</Text>
          <Text className='nav-text'>菜单</Text>
        </View>
        <View className='nav-item' onClick={handleViewCart}>
          <Text className='nav-icon'>🛒</Text>
          <Text className='nav-text'>购物车</Text>
        </View>
        <View className='nav-item active' onClick={() => {}}>
          <Text className='nav-icon'>📋</Text>
          <Text className='nav-text'>订单</Text>
        </View>
        <View className='nav-item' onClick={handleViewProfile}>
          <Text className='nav-icon'>👤</Text>
          <Text className='nav-text'>我的</Text>
        </View>
      </View>
    </View>
  )
} 